<template>
  <!-- 联系我们 -->
  <div class="connect" style="margin-top: 20px;">
    <el-row class="connect">
      <el-col :span="4" :offset="1" style='height: 400px;'>
        <el-menu
          :router='isrouter'
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b" style="height: 300px;font-weight: bolder;border-radius: 20px;padding:20px;">
          <el-menu-item index="/about">
            <i class="el-icon-document"></i>
            <span slot="title">公司简介</span>
          </el-menu-item>
          <el-menu-item index="/culture">
            <i class="el-icon-star-on"></i>
            <span slot="title">企业文化</span>
          </el-menu-item>
          <el-menu-item index="/connect">
            <i class="el-icon-location-outline"></i>
            <span slot="title">联系我们</span>
          </el-menu-item>
        </el-menu>
      </el-col>

      <el-col :span="18" :offset="1">
        <!--面包屑导航-->
        <el-row>
          <el-col>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item  :to="{ path: '/about' }">关于力点</el-breadcrumb-item>
              <el-breadcrumb-item>联系我们</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>

        <!--具体内容-->
        <el-row style="margin-top: 50px;">
          <el-col :span="8" :offset="10">
            <h1>联系我们</h1>
          </el-col>
        </el-row>

        <el-row>
            <el-col>
              <img style="width: 100%;" src="static/connectus.jpg" alt="">
            </el-col>
        </el-row>

        <el-row style="margin-top: 5px;">
          <el-col>
            <el-card class="box-card">
            <el-tag style="margin-bottom: 5px;margin-top: 5px;" type="warning">咨询电话：</el-tag>
            <el-alert
              :closable="canClosable"
              title="0512-52502353   /  13812835754"
              type="info">
            </el-alert>
            <el-tag style="margin-bottom: 5px;margin-top: 5px;" type="warning">值班电话：</el-tag>
            <el-alert
              :closable="canClosable"
              title="0512-52502353   /  13812835754"
              type="info">
            </el-alert>
            <el-tag style="margin-bottom: 5px;margin-top: 5px;" type="warning">QQ咨询1：</el-tag>
            <el-alert
            :closable="canClosable"
            title="1272662379"
            type="info">
          </el-alert>
            <el-tag style="margin-bottom: 5px;margin-top: 5px;" type="warning">QQ咨询2：</el-tag>
            <el-alert
              :closable="canClosable"
              title="1012682023"
              type="info">
            </el-alert>
            <el-tag style="margin-bottom: 5px;margin-top: 5px;" type="warning">EMAIL：</el-tag>
            <el-alert
              :closable="canClosable"
              title="1272662379@qq.com"
              type="info">
            </el-alert>
            <el-tag style="margin-bottom: 5px;margin-top: 5px;" type="warning">微信：</el-tag>
            <el-alert
              :closable="canClosable"
              title="13812835754"
              type="info">
            </el-alert>
            <el-tag style="margin-bottom: 5px;margin-top: 5px;" type="warning">新浪微博：</el-tag>
            <el-alert
              :closable="canClosable"
              title="http://blog.sina.com.cn/u/1931851640"
              type="info">
            </el-alert>
            <el-tag style="margin-bottom: 5px;margin-top: 5px;" type="warning">联系地址：</el-tag>
            <el-alert
              :closable="canClosable"
              title="江苏省常熟市蒋巷生态园"
              type="info">
            </el-alert>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Advantage",

    data() {
      return {
        msg: "Welcome to Your Vue.js App",
        isrouter:true,
        canClosable:false
      };
    },

    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },

      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tagStyle{
    font-size: 34px;
    font-weight: bold;
  }
</style>
